<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2.逻辑处理语句:循环、判断</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <ol>
            <P>遍历数组</P>
            <li v-for="item,index in items" v-bind:key="item.id">{{index}}-{{item}}</li>
        </ol>
        <ul>
            <p>遍历对象</p>
            <li v-for="(value,name,index) in items[0]">{{index}}-{{name}}:{{value}}</li>
        </ul>
        <br>
        
        请输入类型：
        <select v-model="type">
            <option value="A" selected>a</option>
            <option value="B">b</option>
            <option value="C">c</option>
            <option value="D">d</option>
        </select>
        <br>
        结果：{{type}}
        <hr>
        <p v-if="type==='A'">
            你好
        </p>
        <p v-else-if="type==='B'">
            请进
        </p>
        <p v-else-if="type==='C'">
            不客气
        </p>
        <p v-else>
            感谢
        </p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                items: [{ title: 'little king', author: 'wangwanqing' }, { title: 'big king', author: 'wangwanqing1' }],
                type: 'B'
            }
        })
    </script>
</body>

</html>